<!--
 * @Author: wjk
 * @Date: 2020-07-27 11:18:10
 * @LastEditors: wjk
 * @LastEditTime: 2020-10-29 17:05:57
 * @description: 碧选粉丝列表
-->

<template>
  <base-page-view class-name="page-container bxfans">
    <view class="bxfans-tab">
      <view v-for="(tab,index) in tabTit" :key="index" class="tab-item" @click="toggle(index)">
        {{ tab }}
        <view v-if="active===index" class="borderBottom">
        </view>
      </view>
    </view>
    <view v-if="listData.length>0" class="content">
      <view v-for="(list,index) in listData" :key="index" class="list">
        <view class="list-top">
          <view class="head-box">
            <image :src="list.headImg?list.headImg:'/static/images/mine/touxiang.png'" class="bixuan_icon" />
            <image :src="`/static/images/mine/vip_level_${list.role}.png`" class="vip_icon" />
          </view>
          <view class="mid">
            <view>{{ list.nickname }}</view>
            <view class="phone_box">
              <view class="phone">
                {{ list.mobile }}
              </view>
              <view v-if="active === 0" class="phone_button" @click="callPhone(list)">
                <image src="/static/images/commission/phone.png" class="phone_icon" />
              </view>
            </view>
            <view class="orderNo">最近登录: {{ list.lastLoginTime | parseTime }}</view>
          </view>
          <view>
            <image mode="aspectFit" :src="list.downUp?'/static/images/commission/up.png':'/static/images/commission/down.png'" class="downUp" @click="lookDetails(list,index)" />
          </view>
        </view>
        <view v-if="list.downUp" class="list_bottom">
          <view class="bottom_box">
            <view class="text">潜在({{ list.sec.commonCount }})</view>
          </view>
          <view class="border_r"></view>
          <view class="bottom_box">
            <view class="text">全部VIP({{ list.sec.allVipMemberCount }})</view>
          </view>
          <view class="border_r"></view>
          <view class="bottom_box">
            <view class="text">好友({{ list.sec.childrenCount }})</view>
          </view>
        </view>

      </view>
    </view>
    <view class="searchBtn" @click="searchPopup">筛选</view>
    <base-popup :show="pShow" :show-close="false" type="top" :has-scroll="true" :mask="true" :mask-close="true" @close="closePopup">
      <view class="propClass">
        <view class="p-30">
          <view class="title">时间筛选</view>
          <view class="search">
            <view v-for="(tit,index) in searchTit" :key="index" class="searchTit" :class="{active2:active2==index}" @click="chooseTimeTab(index)">{{ tit }}</view>
          </view>
          <view class="pickerTit">选择时间</view>
          <view class="pickerView">
            <view class="pickerTime" :class="{aniPicker:startAniPicker}">
              <picker mode="date" :value="startTimeP" :start="startDate" :end="endDate" fields="month" @change="bindstartDateChange">
                <view class="uni-input">{{ startTimeP }}</view>
              </picker>
            </view>
            <view class="pickerTime" :class="{aniPicker:endAniPicker}">
              <picker mode="date" :value="endTimeP" :start="startDate" :end="endDate" fields="month" @change="bindendDateChange">
                <view class="uni-input">{{ endTimeP }}</view>
              </picker>
            </view>
          </view>
        </view>
        <view class="chooseButton">
          <view class="resetBtn sureBtn" @click="resetBtn">重置</view>
          <view class="sureBtn" @click="sureBtn">确认</view>
        </view>
      </view>
    </base-popup>
    <view v-if="nomore&&listData.length<1" class="empty_view">
      <msg-page type="empty_list_02" width="300" height="213" text="暂无用户信息" />
    </view>
    <view v-if="nomore&&listData.length>20" class="nomore">暂无更多数据~</view>
    <confirm-popup ref="confirm" />
  </base-page-view>
</template>

<script>
import './index.scss'
import { filters } from '@/utils/tools.js'
import { mapState } from 'vuex'
import confirmPopup from '@/components/confirmPopup/index'
import MsgPage from '@/components/msgPage'
export default {
  components: {
    MsgPage,
    confirmPopup
  },
  data() {
    return {
      tabTit: ['我的邀请', '潜在VIP', '全部VIP', '我的好友'],
      active: 0,
      pageSize: 10,
      pageNo: 1,
      listData: [],
      nomore: false,
      pShow: false,
      searchTit: ['全部', '本月', '上月', '最近三个月', '最近6个月', '最近1年'],
      active2: 'no',
      startTimeP: '开始时间',
      endTimeP: '结束时间',
      startTimeS: '',
      endTimeS: '',
      startAniPicker: false,
      endAniPicker: false
    }
  },
  computed: {
    startDate() {
      return this.getDate('start')
    },
    endDate() {
      return this.getDate('end')
    },
    ...mapState([
      'userInfo'
    ])
  },
  created() {
  },
  onLoad(option) {
    this.nomore = false
    // this.getList()
  },
  onPullDownRefresh() {
    this.pageNo = 1
    this.listData = []
    this.nomore = false
    this.app_interactive_data()
  },
  onReachBottom() {
    if (this.nomore) return
    this.pageNo += 1
    this.app_interactive_data()
  },
  onShow() {
  },
  methods: {
    async app_interactive_data() {
      console.log(this.startTime)
      let roles = []
      this.active ? [2, 3] : [0, 1]
      switch (this.active) {
        case 1:
          roles = [0, 1]
          break
        case 2:
          roles = [2, 3]
          break
        default:
          break
      }
      const res = await this.$api.commissionApi.getMyInvitationListNew({
        pageSize: this.pageSize,
        pageNum: this.pageNo,
        userId: this.userInfo.uid,
        underling: this.active < 1,
        roles,
        startTime: this.startTime,
        endTime: this.endTime
      })
      if (res.code === '000000') {
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
        const listArr = res.data.list
        listArr.forEach(item => {
          item.downUp = false
          item.sec = {
            allVipMemberCount: 0,
            childrenCount: 0,
            commonCount: 0,
            inviteCount: 0
          }
        })
        this.listData = this.listData.concat(listArr)
        if (listArr.length < this.pageSize) {
          this.nomore = true
        }
      }
    },
    toggle(index) {
      this.resetBtn()
      this.active = index
      this.nomore = false
      this.listData = []
      this.pageNo = 1
      this.app_interactive_data()
    },
    chooseTimeTab(index) {
      this.active2 = index
      this.startTimeP = '开始时间'
      this.endTimeP = '结束时间'
    },
    closePopup() {
      this.$set(this, 'pShow', false)
    },
    sureBtn() {
      console.log(this.active2)
      if (this.active2 !== 'no') {
        if (this.active2 === 0) {
          this.startTime = ''
          this.endTime = ''
        } else if (this.active2 === 1) {
          this.startTime = this.getTabMonth(0, 'first')
          this.endTime = this.getTabMonth(0, 'last')
        } else if (this.active2 === 2) {
          this.startTime = this.getTabMonth(1, 'first')
          this.endTime = this.getTabMonth(1, 'last')
        } else if (this.active2 === 3) {
          this.startTime = this.getTabMonth(2, 'first')
          this.endTime = this.getTabMonth(0, 'last')
        } else if (this.active2 === 4) {
          this.startTime = this.getTabMonth(5, 'first')
          this.endTime = this.getTabMonth(0, 'last')
        } else if (this.active2 === 5) {
          this.startTime = this.getTabMonth(11, 'first')
          this.endTime = this.getTabMonth(0, 'last')
        } else if (this.active2 === 'reset') {
          this.startTime = ''
          this.endTime = ''
        }
        this.listData = []
        this.pageNo = 1
        this.nomore = false
        this.app_interactive_data()
      } else {
        if (this.startTimeP === '开始时间' && this.endTimeP !== '结束时间') {
          this.startAniPicker = true
          setTimeout(() => {
            this.startAniPicker = false
          }, 2000)
          return false
        }
        if (this.endTimeP === '结束时间' && this.startTimeP !== '开始时间') {
          this.endAniPicker = true
          setTimeout(() => {
            this.endAniPicker = false
          }, 2000)
          return false
        }
        if (this.endTimeP === '结束时间' && this.startTimeP === '开始时间') {
          this.startTime = ''
          this.endTime = ''
        } else {
          this.startTime = `${this.startTimeP}-01 00:00:00`
          let date = new Date(this.endTimeP)
          date = new Date(date.getFullYear(), date.getMonth() + 1, 0) // 获取选择月份的最后一天
          this.endTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 23:59:59`
        }
        this.listData = []
        this.pageNo = 1
        this.nomore = false
        this.app_interactive_data()
      }
      this.pShow = false
    },
    resetBtn() {
      this.active2 = 'reset'
      this.startTimeP = '开始时间'
      this.endTimeP = '结束时间'
      this.startTime = ''
      this.endTime = ''
    },
    async lookDetails(item, index) {
      this.listData[index].downUp = !item.downUp
      if (item.downUp) {
        const res = await this.$api.commissionApi.getBxFans({
          userId: item.uid,
          hideLoading: true,
          inviteUserId: item.userId
        })
        if (res.code === '000000') {
          this.listData[index].sec = res.data
          console.log('res.data', res.data)
        }
      }
    },
    getTabMonth(num, type = 'first') { // first: 月份第一天、last:月份最后一天
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month - num
      if (month <= 0) {
        month = 12 + month
        if (month < 10) {
          month = '0' + month
        }
        year = year - 1
      } else if (month < 10) {
        month = '0' + month
      }
      if (type === 'first') {
        return `${year}-${month}-01 00:00:00`
      } else if (type === 'last') {
        const date = new Date(year, month, 0)
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 23:59:59`
      }
      return `${year}-${month}`
    },
    searchPopup() {
      this.pShow = true
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      if (type === 'start') {
        year = year - 10
      }
      month = month > 9 ? month : '0' + month
      return `${year}-${month}`
    },
    bindstartDateChange: function(e) {
      this.startTimeS = new Date(e.target.value).getTime()
      if ((this.startTimeS > this.endTimeS) && this.endTimeS !== '') {
        this.startAniPicker = true
        setTimeout(() => {
          this.startAniPicker = false
        }, 2000)
        return false
      }
      this.startTimeP = filters.parseTime(this.startTimeS, '{y}-{m}')
      this.active2 = 'no'
      // if (this.endTimeP !== '结束时间') {

      // }
    },
    bindendDateChange: function(e) {
      this.endTimeS = new Date(e.target.value).getTime()
      if ((this.startTimeS > this.endTimeS) && this.startTimeS !== '') {
        this.endAniPicker = true
        setTimeout(() => {
          this.endAniPicker = false
        }, 2000)
        return false
      }
      this.endTimeP = filters.parseTime(new Date(e.target.value).getTime(), '{y}-{m}')
      // if (this.startTimeP !== '开始时间') {

      // }
      this.active2 = 'no'
    },
    // 注销
    callPhone(item) {
      const mention = uni.getStorageSync('__pboneCall_mention__')
      let msg = ''
      // 如果已经提示过了
      if (mention) {
        msg = '请使用登录的手机号码进行拨打，否则无法通话'
      } else {
        msg = '本次通话将被录音，是否需要继续拨打？（请使用登录的手机号码进行拨打，否则无法通话）'
        uni.setStorageSync('__pboneCall_mention__', true)
      }
      this.$refs.confirm.show({
        title: '提示',
        content: msg,
        yesCb: async() => {
          const res = await this.$api.commissionApi.getPhoneNumber({
            targetUserId: item.userId
          })
          if (res.data && res.data.success === true) {
            uni.makePhoneCall({
              phoneNumber: res.data.virtual_mobile
            })
          } else {
            uni.showToast({
              title: res.data.error_message,
              icon: 'none'
            })
          }
        }
      })
    }
  }
}
</script>
